<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <style>
        body
        {
            margin: 0;
            height: 100vh;
            background: url(bj.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }
        #logo-box
        {
            width: 30%;
            height: auto;
            text-align: center;
            background: #00000080;
            padding: 20px 50px;
        }
        h1{
            color: #FFFFFF;
        }


        #logo-box .form .item input::-webkit-input-placeholder
        {
            color: #fff;
        }
        #logo-box .form .item input
        {
            width: 180px;
            border: 0;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            background: #ffffff00;
            font-size: 18px;
        }
        #logo-box .form .item
        {
            margin-top: 15px;
        }
        #logo-box .form .item .icon
        {
            vertical-align: middle;
        }
        #logo-box button
        {
            margin-top:25px;
            width: 180px;
            height: 30px;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            background-image: linear-gradient(-225deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
            border: 0;
            border-radius: 15px;
            cursor: pointer;
        }
        #logo-box button:hover
        {
            background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        }

    </style>
</head>
<body>
<div id="logo-box">
    <h1>Login</h1>
    <form class="form" action="${pageContext.request.contextPath}/d3" method="post">
        <div class="item">
            <i><svg t="1587378928585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7941" width="20" height="20"><path d="M512.010745 1022.082324c-282.335297 0-511.220241-228.798986-511.220241-511.036046C0.790504 228.798986 229.675448 0 512.010745 0c282.312784 0 511.198751 228.798986 511.198751 511.046279C1023.208473 793.285385 794.322505 1022.082324 512.010745 1022.082324zM512.010745 95.826486c-229.385341 0-415.371242 185.884594-415.371242 415.220816 0 107.22714 41.021276 204.6551 107.802238 278.339286 60.140729-29.092595 38.062897-4.88424 116.77254-37.274952 80.539314-33.089629 99.610672-44.639686 99.610672-44.639686l0.776689-76.29464c0 0-30.169113-22.890336-39.543621-94.683453-18.895349 5.426593-25.108864-21.988804-26.237571-39.429011-1.001817-16.863063-10.926864-69.487607 12.105712-64.739467-4.714372-35.144428-8.094352-66.844407-6.417153-83.633792 5.763261-58.938344 62.97324-120.518864 151.105486-125.017318 103.665011 4.486174 144.737452 66.028832 150.500713 124.9682 1.680269 16.800641-2.028193 48.511877-6.739495 83.594907 23.025413-4.686742 13.028735 47.861054 11.901051 64.726164-1.028423 17.440208-7.394411 44.756343-26.208918 39.34203-9.42158 71.79107-39.593763 94.498234-39.593763 94.498234l0.725524 75.924203c0 0 19.070334 10.788717 99.609649 43.892673 78.70862 32.387641 56.605206 9.609869 116.77561 38.765909 66.75231-73.686233 107.772562-171.101913 107.772562-278.339286C927.356404 281.712103 741.398132 95.826486 512.010745 95.826486z" p-id="7942" data-spm-anchor-id="a313x.7781069.0.i32" class="selected" fill="#e6e6e6"></path></svg></i>
            <input type="text" placeholder="Username" name="uname"/>
        </div>
        <div class="item">
            <i><svg t="1587379162766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11878" width="20" height="20"><path d="M338.933902 615.285667a311.56387 311.56387 0 0 1-54.321654-4.938332 307.523416 307.523416 0 1 1 305.727659-479.018226 307.523416 307.523416 0 0 1-251.406005 483.956558z m0-548.154877a240.631461 240.631461 0 1 0 197.533289 102.807099 240.631461 240.631461 0 0 0-198.880106-102.807099z" fill="#e6e6e6" p-id="11879" data-spm-anchor-id="a313x.7781069.0.i42" class="selected"></path><path d="M445.691666 534.65617l62.178093-43.457323 342.136635 489.343829-62.178092 43.457324z" fill="#e6e6e6" p-id="11880" data-spm-anchor-id="a313x.7781069.0.i40" class="selected"></path><path d="M602.999995 760.023696l178.857414-124.9847 43.457324 62.178092-178.857415 124.9847zM747.109508 957.73656l202.381833-141.415877 43.457324 62.178092-202.381834 141.415877z" fill="#e6e6e6" p-id="11881" data-spm-anchor-id="a313x.7781069.0.i41" class="selected"></path><path d="M270.181383 210.13663m-51.87802 36.271432a63.30044 63.30044 0 1 0 103.75604-72.542865 63.30044 63.30044 0 1 0-103.75604 72.542865Z" fill="#e6e6e6" p-id="11882" data-spm-anchor-id="a313x.7781069.0.i43" class="selected"></path></svg></i>
            <input type="password" placeholder="Password" name="upwd"/>
        </div>
        <button type="submit">Login</button>
    </form>

</div>
</body>
</html>
